<template>
  <div>
    <div>
      <div class="top">
        <span class="pinzhi">
          <b>品质优选</b>
        </span>
        <span class="gengduo">
          <a href="">
            <b>更多</b>
          </a>
        </span>
      </div>
      <div class="bbb">
        <span v-for="(cate,index) in cates" :key="index" class="lll">
          <a>
            <img :src="cate.img" alt="">
            <p>{{cate.name}}</p>
          </a>
          <div class="dapai">
            <b>大牌精选</b>
          </div>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created () {
    this.$http.get('./static/json/recommend.json').then(response => {
      console.log(response.data)
      this.cates = response.data
    })
  },
  data () {
    return {
      cates: []
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  position: relative;
  width: 100%;
  margin: 5px;
}
.pinzhi {
  font-size: 15px;
  color: rgb(241, 161, 95);
  padding: 5px;
}
.gengduo {
  position: absolute;
  font-size: 10px;
  padding: 5px;
  right: 0;
}
.gengduo a {
  color: #000;
}
.dapai {
  display: inline-block;
  font-size: 10px;
  color: aqua;
  border: 1px solid aqua;
  padding: 3px;
}
.lll {
  display: inline-block;
  width: 22.2%;
  padding: 5px;
  text-align: center;
}
.lll p {
  color: #000;
  font-size: 10px;
}
</style>
